<template>
  <div id="app">
    <div id="nav">
      <h1>Vue 中的 render 函数</h1>
      (
        <router-link to="/">basic</router-link> |
        <router-link to="/v-model">v-model</router-link> |
        <router-link to="/directives">directives</router-link> |
        <router-link to="/slot">slot</router-link> |
        <router-link to="/scoped-slot">scoped-slot</router-link>|
        <router-link to="/functional">functional</router-link>
      )
    </div>

    <div class="wrap">
      <fieldset class="tpl">
        <legend>tempalte</legend>
        <router-view name="tpl"></router-view>
      </fieldset>
      <fieldset class="render">
        <legend>render</legend>
        <router-view name="render"></router-view>
      </fieldset>
      <fieldset class="jsx">
        <legend>jsx</legend>
        <router-view name="jsx">to do</router-view>
      </fieldset>
    </div>

  </div>
</template>

<style>
#nav {
  text-align: center;
  font-size: 14px;
  margin-bottom: 10px;
}
#nav h1 {
  display: inline;
  font-size: 14px;
  margin: 10px;
}
.wrap {
  display: flex;
}
.tpl, .render, .jsx {
  flex: 1;
  border: 1px solid #ccc;
  margin: 10px;
}
</style>
